<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<style>
  .port-box {
    padding: 16px;
  }
  .blacklist-list {
    width: 500px;
    list-style: none;
    padding-left: 0px;
    margin-bottom: 0px;
  }
  .blacklist-item {
    width: 100%;
    margin-bottom: 5px;
  }
  .blacklist-item>div {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    line-height: 52px;
    height: 52px;
    border: 1px solid #eee;
  }
  .blacklist-command {
    width: 150px;
  }
  .blacklist-join-time {
    width: 250px;
  }
  .blacklist-operation {
    width: 90px;
  }
</style>
<div class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1 class="m-0 text-dark">用户管理</h1>
      </div><!-- /.col -->
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a th:href="@{../admin}">首页</a></li>
          <li class="breadcrumb-item active">连接管理</li>
          <li class="breadcrumb-item active">黑名单</li>
        </ol>
      </div><!-- /.col -->
    </div><!-- /.row -->
  </div><!-- /.container-fluid -->
</div>
<!-- Main content -->
<section class="content">
  <div class="card card-info">
    <div class="port-box">
      <span>现有黑名单个数： </span>
      <span th:text="${blacklistListSize}"></span>
    </div>
  </div>
  <div class="card card-body">
    <ul class="blacklist-list">
      <li class="blacklist-item">
        <div class="blacklist-command">连接命令</div>
        <div class="blacklist-join-time">加入黑名单时间</div>
        <div class="blacklist-operation">操作</div>
      </li>
      <li class="blacklist-item" th:each="black:${blacklistList}">
        <div class="blacklist-command" th:text="${black.command}"></div>
        <div class="blacklist-join-time" th:text="${black.joinTime}"></div>
        <div class="blacklist-operation">
          <button class="btn btn-info btn-sm" th:onclick="cancel([[${black.command}]])">移除</button>
        </div>
      </li>
    </ul>
  </div>
</section>

<script>

  function cancel(command) {
    Core.confirm("是否从黑名单中移除？", function() {
      Core.postAjax("/col/channel/cancel", {command}, function (res) {
        if (res.code === 1) {
          layer.msg("移除成功");
          setTimeout(() => {
            window.location.reload();
          }, 2000)
        } else {
          layer.msg(res.message);
        }
      })
    })
  }

</script>